import classNames from '@/utils/classnames';
import { Button } from 'antd-mobile';
import { NavBar, Icon } from 'antd-mobile';
import { history } from 'umi';
import styles from './browser-info.less';

export default function IndexPage() {
  function navBarGoBack() {
    history.goBack();
  }

  const userAgent = window.navigator.userAgent;

  return (
    <div className={classNames('page', styles.page)}>
      <div className="page__navbar">
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          leftContent="返回"
          onLeftClick={() => navBarGoBack()}
        >
          browser info
        </NavBar>
      </div>
      <div className="weui-form">
        <div className="weui-cells__title">browserInfo:</div>
        <div className="weui-cells">
          <div className="weui-cell">
            <div className="weui-cell__bd">
              <pre>{JSON.stringify(browser, null, 2)}</pre>
            </div>
          </div>
        </div>

        <div className="weui-cells__title">UserAgent:</div>
        <div className="weui-cells weui-cells_form">
          <div className="weui-cell weui-cell_active">
            <div className="weui-cell__bd">
              <div className="weui-textarea">{userAgent}</div>
            </div>
          </div>
        </div>

        <Button
          onClick={() => {
            wx.closeWindow();
          }}
        >
          closeWindow
        </Button>
      </div>
    </div>
  );
}
